<template>
  <view class="content">
    <van-nav-bar title="意见反馈" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view class="public">
      <view class="public-cont">
        <uni-easyinput
          :inputBorder="false"
          v-model="formData.content"
          type="textarea"
          placeholder="请输入意见"
        ></uni-easyinput>
      </view>

      <view class="file-upload">
        <view class="upload-list">
          <view class="list-item" v-for="(item, index) in fileList" :key="item">
            <image class="img-box" :src="item" />
            <text class="del" @click="delHandle(index)"></text>
          </view>
        </view>
        <view class="upload" v-if="fileList.length !== 3" @click="uploadHandle">
          <image class="img-box" src="https://images.tongzhuangkc.com/camera.png" />
          <text>添加图片</text>
        </view>
      </view>
    </view>
    <view class="public-opt" :style="{ paddingBottom: safeAreaBot + 'px' }">
      <view class="opt-btn" @click="publicHandle">提交</view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { uploadImageToQiniu } from '@/utils/upload'
import { feedback } from '@/http/common'
export default {
  components: {},
  setup() {
    const state = reactive({
      fileList: [],
      formData: {
        content: '',
        images: '',
      },
      safeAreaTop: 0,
      safeAreaBot: 0,
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const uploadHandle = () => {
      uni.chooseImage({
        count: 3 - state.fileList.length,
        sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
        success: (res) => {
          if (res.tempFiles) {
            res.tempFiles.forEach(async (item) => {
              const data = await uploadImageToQiniu(item)
              state.fileList.push(`https://images.tongzhuangkc.com/${data.hash}`)
            })
          }
        },
      })
    }
    const delHandle = (index) => {
      state.fileList.splice(index, 1)
    }
    const publicHandle = async () => {
      if (!state.formData.content) {
        uni.showToast({
          title: '请输入意见',
          duration: 2000,
          icon: 'none',
        })
        return
      }
      if (!state.fileList.length) {
        uni.showToast({
          title: '请上传图片',
          icon: 'none',
        })
        return
      }
      state.formData.images = state.fileList.join(',')
      await feedback(state.formData)
      uni.showToast({
        title: '反馈成功',
      })
      setTimeout(() => {
        uni.switchTab({
          url: `/pages/user/index`,
        })
      }, 1000)
    }
    onMounted(() => {
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    return {
      ...toRefs(state),
      onClickLeft,
      uploadHandle,
      delHandle,
      publicHandle,
    }
  },
}
</script>

<style lang="scss">
.content {
  background: #fff;
  height: 100vh;
}
.public {
  padding: 24rpx;
  overflow-y: auto;
}
.public-cont {
  padding: 0 24rpx;
  height: 440rpx;
}
.public-list {
  background: #fff;
  padding-bottom: 32rpx;
  margin-bottom: 16rpx;
}
.file-upload {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .upload-list {
    display: flex;
    .list-item {
      position: relative;
      width: 160rpx;
      height: 160rpx;
      margin: 0 15rpx 15rpx 0;

      .img-box {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
      .del {
        width: 30rpx;
        height: 30rpx;
        background: url('https://images.tongzhuangkc.com/tz/del-icon.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  .upload {
    width: 160rpx;
    height: 136rpx;
    padding-top: 24rpx;
    background: #f3f3f3;
    border-radius: 16rpx;
    text-align: center;
    .img-box {
      display: block;
      width: 64rpx;
      height: 64rpx;
      margin: 0 auto;
    }
    text {
      color: #2b303b;
      line-height: 48rpx;
      font-size: 28rpx;
    }
  }
}
.public-opt {
  padding: 16rpx 24rpx 24rpx;
  width: calc(100% - 48rpx);
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  .opt-btn {
    height: 80rpx;
    background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
    border-radius: 40rpx;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
  }
}
</style>
